import type { FC } from "react"; //用于描述函数组件的属性和返回值。
import { useState } from "react";
import classnames from "classnames";
import styled, { css } from "styled-components";
import style from "./index.module.scss";
import { Flex, Layout } from "antd";
import { Space } from "antd";
import { Divider } from "antd";
import Model from "../Model";
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  FormOutlined,
  SearchOutlined,
  StarOutlined,
  StarTwoTone,
} from "@ant-design/icons";
import {
  StarFilled,
  CheckCircleTwoTone,
  HeartTwoTone,
  SmileTwoTone,
} from "@ant-design/icons";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { Button, Tooltip, message } from "antd";
import { Modal } from "antd";
const { confirm } = Modal;
const { Header, Footer, Sider, Content } = Layout;
type cardType = {
  id: string;
  state: boolean;
  title: string;
  isStar: boolean;
  isPublished: boolean;
  time?: Date;
  editQuestionList?: (id: string) => void;
  delQuestionList?: (id: string) => void;
  handStar?: (id: string) => void;
};
type buttonType = {
  state?: boolean;
};
// const Button: FC<buttonType> = styled.button`
//   background: ${(props) => (props.state ? "#BF4F74" : "white")};
//   color: ${(props) => (props.state ? "white" : "#BF4F74")};
//   ont-size: 1em;
//   margin: 1em;
//   padding: 0.25em 1em;
//   border: 2px solid #bf4f74;
//   border-radius: 3px;
// `;
const Card: FC<cardType> = (prpos) => {
  const [messageApi, contextHolder] = message.useMessage();
  const success = (content: string) => {
    messageApi.open({
      type: "success",
      content: content,
    });
  };
  const del = (id: string) => {
    delQuestionList && delQuestionList(id);
    messageApi.open({
      type: "success",
      content: "删除成功",
    });
  };

  const showPromiseConfirm = (id: string) => {
    confirm({
      title: "提示",
      icon: <ExclamationCircleFilled />,
      content: "请您确认是否要删除该问卷？",
      onOk() {
        del(id);
      },
      onCancel() {},
    });
  };
  //编辑
  const edit = (id: string) => {
    editQuestionList && editQuestionList(id);
    success("发布成功");
  };
  //表型
  const star = (id: string, starState: boolean) => {
    handStar && handStar(id, starState);
    if (!isStar) success("标星成功");
    else success("取消标星成功");
  };
  const {
    id,
    title,
    state,
    isStar,
    isPublished,
    handStar,
    editQuestionList,
    delQuestionList,
  } = prpos;

  return (
    <div className={style.cardBox}>
      {contextHolder}
      <Header className={style.header}>
        <div className={style.headerLeft}>
          <div className={style.cardTitle}>
            <Space>
              {isStar && <StarTwoTone twoToneColor="#eb2f96" />}
              {title}
            </Space>
          </div>
        </div>
        <div className={style.headerRight}>
          <Space>
            {/* <div className={state ? style.published : style.noPublished}>
              {state ? "已发布" : "未发布"}
            </div> */}

            <Button danger type={isPublished ? "primary" : ""}>
              {isPublished ? "已发布" : "未发布"}
            </Button>

            <span>答卷：123</span>
            <span>时间</span>
          </Space>
        </div>
      </Header>
      <Divider></Divider>
      <Content className={style.content}>
        <div className={style.contentLeft}>
          <Button
            danger
            type="text"
            onClick={() => edit(id)}
            icon={<EditOutlined />}
          >
            编辑问卷
          </Button>
          <Button
            danger
            type="text"
            onClick={() => edit(id)}
            icon={<FormOutlined />}
          >
            问卷统计
          </Button>
        </div>
        <div className={style.contentRight}>
          <Space>
            <Tooltip title="标星">
              <Button
                danger
                shape="circle"
                icon={<StarOutlined />}
                onClick={() => star(id, !isStar)}
              />
            </Tooltip>

            <Model title="温馨提示" content="你是否要复制？">
              <Tooltip title="复制">
                <Button danger shape="circle" icon={<CopyOutlined />} />
              </Tooltip>
            </Model>
            <Tooltip title="删除">
              <Button
                danger
                shape="circle"
                icon={<DeleteOutlined />}
                onClick={() => showPromiseConfirm(id)}
              />
            </Tooltip>
          </Space>

          {/* <Button state={false}>js控制css</Button> */}
        </div>
      </Content>
    </div>
  );
};
export default Card;
